<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form #f="ngForm" novalidate (ngSubmit)="save(f.value, f.valid)">
                        <div class="card-header card-header-icon" data-background-color="rose">
                            <i class="material-icons">mail_outline</i>
                        </div>
                        <div class="card-content">
                            <h4 class="card-title">Register Forms</h4>

                            <div class="form-group label-floating">
                                <label class="control-label" for="">Email Address:
                                    <span class="star">*</span>
                                </label>
                                <input type="email" class="form-control" name="email" [ngModel]="user.email"
                                  required  #email="ngModel" pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
                                <small [hidden]="email.valid || (email.pristine && !f.submitted)" class="text-danger">
                                  Email is required and format should be <i>john@doe.com</i>.
                                </small>
                            </div>
                            <div class="form-group label-floating">
                                <label  for="" class="control-label">Password
                                    <span class="star">*</span>
                                </label>
                                <input type="password" class="form-control" name="password" [ngModel]="user.password"
                                  required validateEqual="confirmPassword" reverse="true" #password="ngModel">
                                <small [hidden]="password.valid || (password.pristine && !f.submitted)" class="text-danger">
                                  Password is required
                                </small>

                            </div>

                            <div class="form-group label-floating">
                                <label for="" class="control-label">Confirm Password
                                    <span class="star">*</span>
                                </label>

                                <input type="password" class="form-control" name="confirmPassword" [ngModel]="user.confirmPassword"
                                  required validateEqual="password" reverse="false" #confirmPassword="ngModel">
                                <small [hidden]="confirmPassword.valid || (confirmPassword.pristine && !f.submitted)" class="text-danger">
                                  Password mismatch
                                </small>
                            </div>
                            <div class="category form-category">
                                <span class="star">*</span> Required fields</div>
                            <div class="form-footer text-right">
                                <div class="checkbox pull-left">
                                    <label>
                                        <input type="checkbox" name="optionsCheckboxes" [ngModel]> Subscribe to newsletter
                                    </label>
                                </div>
                                <div class="form-group">

                                    <button type="submit" class="btn btn-rose btn-fill btn-wd" [disabled]="!f.valid">Register</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <div class="col-md-6">
                <div class="card">
                    <form #f1="ngForm" novalidate (ngSubmit)="save(f1.value, f1.valid)">
                        <div class="card-header card-header-icon" data-background-color="rose">
                            <i class="material-icons">contacts</i>
                        </div>
                        <div class="card-content">
                            <h4 class="card-title">Login Form</h4>
                            <div class="form-group label-floating">
                                <label class="control-label" for="">Email Address:
                                    <span class="star">*</span>
                                </label>
                                <input type="email" class="form-control" name="email" [ngModel]="user.email"
                                  required  #email="ngModel" pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
                                <small [hidden]="email.valid || (email.pristine && !f1.submitted)" class="text-danger">
                                  Email is required and format should be <i>john@doe.com</i>.
                                </small>
                            </div>
                            <div class="form-group label-floating">
                                <label  for="" class="control-label">Password
                                    <span class="star">*</span>
                                </label>
                                <input type="password" class="form-control" name="password" [ngModel]="user.password"
                                  required validateEqual="confirmPassword" reverse="true" #password="ngModel">
                                <small [hidden]="password.valid || (password.pristine && !f1.submitted)" class="text-danger">
                                  Password is required
                                </small>

                            </div>
                            <div class="category form-category">
                                <span class="star">*</span> Required fields</div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-rose btn-fill btn-wd" [disabled]="!f1.valid">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card">
                    <form #f2="ngForm" class="form-horizontal" novalidate (ngSubmit)="save(f2.value, f2.valid)">
                        <div class="card-header card-header-text" data-background-color="rose">
                            <h4 class="card-title">Type Validation</h4>
                        </div>
                        <div class="card-content">
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Required Text</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="text" name="text"  [ngModel]="typeValidation.text"
                                          required  #text="ngModel">
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>required</code>
                                </label>
                            </div>
                            <div class="row">

                                <label class="col-sm-2 label-on-left">Email</label>

                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input type="email" class="form-control" name="email" [ngModel]="typeValidation.email"
                                          required  #email="ngModel" pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
                                        <small [hidden]="email.valid || (email.pristine && !f2.submitted)" class="text-danger">
                                          Email is required and format should be <i>john@doe.com</i>.
                                        </small>
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>email="true"</code>
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Number</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="number" name="number" number="true" [ngModel]="typeValidation.number"
                                          required  #number="ngModel">
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>number="true"</code>
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Url</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label" for="url"></label>
                                        <input class="form-control" type="text" id="url" required pattern="https?://.+" [(ngModel)]="typeValidation.url" name="url" #url="ngModel">
                                          <small [hidden]="url.valid || (url.pristine && !f2.submitted)" class="text-danger">
                                            Must be a valid URL!
                                          </small>
                                    </div>
                                </div>

                                <label class="col-sm-3 label-on-right">
                                    <code>url="true"</code>
                                </label>
                            </div>
                            <div class="row">

                                <label class="col-sm-2 label-on-left">Equal to</label>
                                <div class="col-sm-3">
                                    <div class="form-group label-floating column-sizing">
                                        <label class="control-label"></label>
                                        <input type="text" class="form-control" name="idSource" [ngModel]="typeValidation.idSource" placeholder="#idSource"
                                          required validateEqual="idDestination" reverse="true" #idSource="ngModel">
                                        <small [hidden]="idSource.valid || (idSource.pristine && !f2.submitted)" class="text-danger">
                                          IdSource is required
                                        </small>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group label-floating column-sizing">
                                        <label class="control-label"></label>
                                        <input type="text" class="form-control" name="idDestination" [ngModel]="typeValidation.idDestination" placeholder="#idDestination"
                                          required validateEqual="idSource" reverse="false" #idDestination="ngModel">
                                        <small [hidden]="idDestination.valid || (idDestination.pristine && !f2.submitted)" class="text-danger">
                                          IdSource mismatch!
                                        </small>
                                    </div>
                                </div>
                                <label class="col-sm-4 label-on-right">
                                    <code>equalTo="#idSource"</code>
                                </label>
                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <button type="submit" class="btn btn-rose btn-fill" [disabled]="!f2.valid">Validate Inputs</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- <div class="col-md-12">
                <div class="card">
                    <form id="RangeValidation" class="form-horizontal" action="" method="">

                        <div class="card-header card-header-text" data-background-color="rose">
                            <h4 class="card-title">Range Validation</h4>
                        </div>
                        <div class="card-content">
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Min Length</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="text" name="min_length" minLength="5" />
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>minLength="5"</code>
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Max Length</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="text" name="max_length" maxLength="5" />
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>maxLength="5"</code>
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Range</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="text" name="range" range="[6,10]" />
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>range="[6,10]"</code>
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Min Value</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="text" name="min" min="6" />
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>min="6"</code>
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 label-on-left">Max Value</label>
                                <div class="col-sm-7">
                                    <div class="form-group label-floating">
                                        <label class="control-label"></label>
                                        <input class="form-control" type="text" name="max" max="6" />
                                    </div>
                                </div>
                                <label class="col-sm-3 label-on-right">
                                    <code>max="6"</code>
                                </label>
                            </div>
                        </div>
                        <div class="card-footer text-center">
                            <button type="submit" class="btn btn-rose btn-fill">Validate Inputs</button>
                        </div>
                    </form>
                </div>
            </div> -->
        </div>
    </div>
</div>
